<template>
  <div class="from">
    <input type="file" ref="avatarFile" style="display: none;" @change="selectFile">
    <img :src="avatar | dalImg" alt="头像" @click="selImg"/>
    <van-form>
			<van-field v-model="nickName" type="text" name="密码" label="昵称" placeholder="请输入昵称"  />
			<div style="margin: 16px;"><van-button round block type="info" native-type="submit" @click="save">保存</van-button></div>
		</van-form>
    <!-- <input type="text" placeholder="请输入昵称" v-model="nickName" />
    <button type="button" @click="save">保存</button> -->
  </div>
</template>

<script>
import axios from 'axios'
import {uploadUrl} from '../utils/tools'
import { loadUserInfoAPI, modifyInfo } from "../services/user";
export default {
  name: "UserInfo",
 data() {
    return {
      nickName: '',
      avatar:'',
    };
  }, 
  created() {
    this.loadData()
  },
  methods: {
   async loadData() {
      const res = await loadUserInfoAPI();
      this.nickName = res.data.nickName;
      this.avatar = res.data.avatar;
    },
    async save() {
      if (this.nickName) {
        await modifyInfo({ nickName: this.nickName,avatar:this.avatar });
        this.$router.push({
          name: "User",
        });
      }
    },
    selImg(){
      this.$refs.avatarFile.click();
    },
    selectFile(){
       const formData = new FormData();
      formData.append("file", this.$refs.avatarFile.files[0]);
      console.log(this.$refs.avatarFile.files[0])
      axios.post(uploadUrl, formData).then((res) => {
        this.avatar = res.data.data;
      });
    }
  },
};
</script>

<style scoped="scoped" lang="scss">
.from {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
  }
}
</style>
